<template>
  <div class="continua">
    <div class="content">
      <!-- 1. computed:：接收一个回调函数，模板中可以直接渲染计算属性，计算属性拥有缓存功能：-->
      <el-button type="primary" @click="count += 1">更改Count</el-button>
      <div>{{ count }}</div>
      <hr>
      <el-button type="primary" @click="age += 1">更改Age</el-button>
      <div>{{ age }}</div>
      <hr>
      <h3>Count + Age = {{ getInfoCom }} </h3>
      <hr>
      <el-button type="primary" @click="count += 1">读写</el-button>
      <h3>{{ countCom }} </h3>
    </div>
  </div>
</template>

<script setup>
// 计算属性：
// 1- 引入组合API->computed
// 2- computed接收一个回调函数
// 3- 将computed函数的返回结果赋值给常量,变量
// 4- 模板中可以直接渲染计算属性。
// 5- 计算属性拥有缓存功能，只有所依赖的数据不发生改变，计算属性对应的函数不会再次执行。
// 6- 模板中如果使用了计算属性，那么在初次渲染时，会执行。
// 创建一个只读的计算属性（接收函数）
import {computed, ref} from "vue";

const count = ref(8)
const age = ref(0)
const getInfoCom = computed(function () {
  // 模板中如果使用了计算属性，初次渲染的时候会执行。
  console.log("getInfoCom")
  return "今年" + count.value + "," + age.value + "岁了"
})
// 创建一个读写的计算属性(对象)
const countCom = computed({
  // 返回值即是计算属性的值
  get() {
    console.log("触发了,")
    return count.value * 2;
  },
  // 当设置计算属性值时调用。接收的参数是修改的值
  set(v) {
    console.log("v,", v)
    count.value = v / 2;
  }
})
</script>

<style scoped lang="less">
.continua {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

  .content {
    width: 500px;
    height: 500px;
    border: 1px solid #ccc;
  }
}
</style>
